
<template>
  <div class="container">
    <el-card style="margin-left:10px">
      <!-- 新增按钮 -->
      <div class="header">
        <span class="explain">说明：目前支持学科和关键字条件筛选</span>
        <el-button
        class="right"
          type="success"
          icon="el-icon-edit"
          @click="$router.push('/questions/new')"
          >新增试题</el-button
        >
      </div>
      <!-- 表单组件 -->
      <div>
         <formData
         :tableData="tableData"
         @searchFn="searchFn"
         @empty="emptyFn"
         >
         </formData>
      </div>
      <!-- 标签页 -->
      <el-tabs type="border-card" @tab-click="handleClick" v-model="activeName">
          <el-tab-pane label="全部" name="0">
          </el-tab-pane>
          <el-tab-pane label="待审核" name="1">
          </el-tab-pane>
          <el-tab-pane label="已审核" name="2">
          </el-tab-pane>
          <el-tab-pane label="已拒绝" name="3">
          </el-tab-pane>
      </el-tabs>
       <div class="tips">
          <i class="el-icon-info" />
          <span>数据一共{{ counts }}条</span>
        </div>
        <!-- 表格数据 -->
         <el-table :data="tableData" border style="width: 100%"  :cell-style="{textAlign: 'center'}" :header-cell-style="{textAlign: 'center'}" >
        <el-table-column prop="number" label="试题编号" width="200">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="60">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="100">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="60">
          <template slot-scope="scope">
            {{ getType(scope.row.questionType) }}
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="200">
          <template slot-scope="scope">
            <p v-html="scope.row.question"></p>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="155">
          <template slot-scope="scope">
            {{ getTime(scope.row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="60">
          <template slot-scope="scope">
            {{ getDifficulty(scope.row.difficulty) }}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120">
        </el-table-column>
        <el-table-column prop="chkState" label="审核状态" width="80">
          <template slot-scope="scope">
            {{ getChk(scope.row.chkState) }}
          </template>
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="100">
        </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="100">
        </el-table-column>
        <el-table-column prop="publishState" label="发布状态" width="100">
          <template slot-scope="scope">
            {{ getPublish(scope.row.publishState) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="previewFn(scope.row)"
              >预览</el-button
            >
            <el-button  v-if="tabName === '0' || '2' || '3'" type="text" size="small" @click="examineFn(scope.row.id)"
            :disabled="scope.row.chkState===2||scope.row.chkState===3"
              >审核</el-button>
               <el-button  v-else-if="tabName === '1'" type="text" size="small" @click="examineFn(scope.row.id)"
              >审核</el-button>
            <el-button type="text" size="small" @click="$router.push('/questions/new?id='+scope.row.id)"
            :disabled="scope.row.publishState === 0 ? true:false"
              >修改</el-button
            >
            <el-button type="text" size="small" @click="isUpperFn(scope.row)">
               {{scope.row.publishState === 1 ? '上架' :'下架'}}
            </el-button>
            <el-button type="text" size="small" @click="delFn(scope.row)"
             :disabled="scope.row.publishState === 0 ? true:false"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
       <el-row type="flex" justify="end" style="margin-top:20px">
        <el-pagination
        background
        @current-change="PageChangeFn"
        @size-change="PageSizeChangeFn"
        :current-page="params.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="params.pagesize"
        layout=" prev,pager,next,sizes,jumper"
        :total="counts"
      >
      </el-pagination>
      </el-row>
    </el-card>
    <!-- 审核的弹窗 -->
    <el-dialog title="题目审核" :visible.sync="showDialog" width="500px" v-if="showDialog">
      <el-form :model="dialogForm" :rules="rules" ref="dialogForm">
        <el-form-item prop="chkState">
          <el-radio-group v-model="dialogForm.chkState">
            <el-radio label="通过"></el-radio>
            <el-radio label="拒绝"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="chkRemarks">
          <el-input
            type="textarea"
            placeholder="请输入审核意见"
            v-model="dialogForm.chkRemarks"
          ></el-input>
        </el-form-item>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </el-form>
    </el-dialog>
    <!-- 预览的弹窗 -->
    <el-dialog
      title="题目预览"
      :visible.sync="previewDialog"
      v-if="previewDialog"
    >
      <preview :row="row" @closeFn="closeFn"></preview>
    </el-dialog>
  </div>
</template>

<script>
import preview from './components/preview'
import formData from './components/formData'
import { choice, remove, choiceCheck, choicePublish } from '../../api/hmmm/questions'
import { parseTime } from '../../utils/index'
import {
  difficulty,
  questionType,
  chkType,
  publishType
} from '../../api/hmmm/constants'
export default {
  components: {
    preview,
    formData
  },
  data () {
    return {
      showDialog: false, // 控制审核的弹窗是否出现
      previewDialog: false, // 控制预览的弹窗是否出现
      activeName: '0', // 默认显示全部的数据
      chkState: 0, // 判断审核弹窗的拒绝还是通过
      tableData: [], // 设置一个空数组用来接受表格中的数据
      counts: 0, // 数据的个数
      params: { // 页码和每页显示的数据多少
        pagesize: 10,
        page: 1
      },
      row: '', // 预览弹窗需要的数据
      tabName: '', // 用来存放当前点的标签页
      dialogForm: {
        chkState: '',
        chkRemarks: ''
      },
      rules: { // 定义验证规则
        chkRemarks: [
          { required: true, message: '请填写审核意见', trigger: 'blur' }
        ]
      },
      searchForm: {
        subjectID: '',
        keyword: ''
      } // 搜索需要的数据
    }
  },
  created () {
    // 页面创建的时候,发起请求
    this.questionsListFn()
  },
  methods: {
    emptyFn () {
      this.questionsListFn()
    },
    // 子组件的搜索按钮
    async searchFn (form) {
      console.log(form)
      // 获取到子组件传递过来的值
      this.searchForm = {
        subjectID: form.subjectID,
        keyword: form.keyword
      }
      try {
        const res = await choice(this.searchForm)
        console.log(res)
        this.tableData = res.data.items
        this.counts = res.data.counts
        this.params.page = res.data.page
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    // 转换发布状态
    getPublish (id) {
      const newPublish = {}
      publishType.forEach((item) => {
        newPublish[item.value] = item.label
      })
      return newPublish[id]
    },
    // 转换审核状态
    getChk (id) {
      const newChk = {}
      chkType.forEach((item) => {
        newChk[item.value] = item.label
      })
      return newChk[id]
    },
    // 转换题的类型
    getType (id) {
      const newType = {}
      questionType.forEach((item) => {
        newType[item.value] = item.label
      })
      return newType[id]
    },
    // 转换时间
    getTime (time) {
      return parseTime(time)
    },
    // 转换难度
    getDifficulty (id) {
      const newDifficulty = {}
      difficulty.forEach((item) => {
        newDifficulty[item.value] = item.label
      })
      return newDifficulty[id]
    },
    // 定义一个方法,请求表格中的数据
    async questionsListFn () {
      try {
        const res = await choice()
        console.log('页面创建请求回来的数据', res)
        // 用获取到数据,铺设页面
        this.tableData = res.data.items
        this.counts = res.data.counts
        this.params.page = res.data.page
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    // 页面变化时请求的数据
    async getPageFn () {
      try {
        //  请求数据
        const res = await choice(this.params)
        this.tableData = res.data.items
        this.counts = res.data.counts
        this.params.page = res.data.page
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    // 进入某一页
    PageChangeFn (pageNum) {
      console.log(pageNum)
      this.params.page = pageNum
      // 请求数据
      this.getPageFn()
    },
    // 每页显示信息条数
    PageSizeChangeFn (pageSize) {
      console.log(pageSize)
      this.params.pagesize = pageSize
      // 请求数据
      this.getPageFn()
    },
    // 删除按钮
    delFn (row) {
      this.$confirm('此操作将永久删除该题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            // 确定删除调用接口
            const res = await remove(row)
            console.log(res)
            // 刷新页面
            this.questionsListFn()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } catch (error) {
            this.$message.error(error.message)
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 审核
    examineFn (id) {
      // 弹出弹框
      this.showDialog = true
      // 获取到需要审核的id
      this.dialogForm.id = id
    },
    // 确认按钮
    submitForm () {
      this.$refs.dialogForm.validate(async (valid) => {
        // 趁早返回
        if (!valid) {
          return false
        }
        // 判断用户点击是通过还是拒绝
        this.dialogForm.chkState === '通过' ? this.dialogForm.chkState = 2 : this.dialogForm.chkState = 3
        try {
          // 调用接口
          const res = await choiceCheck(this.dialogForm)
          console.log(res)
          // 关闭弹窗
          this.showDialog = false
          // 刷新页面
          this.questionsListFn()
          // 清空表单数据
          this.dialogForm = {
            chkState: '',
            chkRemarks: ''
          }
        } catch (error) {
          this.$message.error(error.message)
        }
      })
    },
    // 预览功能
    previewFn (row) {
      // 点击预览按钮,弹窗显示
      this.previewDialog = true
      // 获取到点击的那个数据详情
      this.row = row
    },
    // 关闭预览功能
    closeFn () {
      // 关闭弹窗
      this.previewDialog = false
    },
    // 上架下架功能
    isUpperFn (row) {
      this.$confirm(`您确认${row.publishState === 1 ? '上架' : '下架'}这道题目么?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (row.publishState === 1) {
            this.publishState = 0
          } else {
            this.publishState = 1
          }
          try {
            // 确定之后调用接口
            await choicePublish({
              id: row.id,
              publishState: this.publishState
            })
            // 刷新页面
            this.questionsListFn()
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          } catch (error) {
            this.$message.error(error.message)
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    // 标签页切换请求的数据
    async getHandle () {
      try {
        const res = await choice({
          chkState: this.chkState
        })
        console.log(res)
        this.tableData = res.data.items
        this.counts = res.data.counts
        this.params.page = res.data.page
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    // 切换标签页,显示不同的数据
    handleClick (tab) {
      console.log(tab)
      this.tabName = tab.name
      if (tab.name === '0') {
        this.chkState = 0
        this.questionsListFn()
      } else if (tab.name === '1') {
        this.chkState = 1
        this.getHandle()
      } else if (tab.name === '2') {
        this.chkState = 2
        this.getHandle()
      } else {
        this.chkState = 3
        this.getHandle()
      }
    }
  }
}
</script>

<style scoped>
.header {
  height: 50px;
}
.explain{
  font-size: 10px;
  color: pink;
}
.right {
 float: right;
}
.tips {
  line-height: 24px;
  font-size: 12px;
  padding: 0px 15px;
  border-radius: 5px;
  /* border: 1px solid rgba(145, 213, 255, 1); */
  background: rgb(221, 223, 224);
}
.tips > i {
  margin-right: 10px;
  color: #81868a;
}
</style>
